import { Component, Output, OnInit, OnDestroy, EventEmitter } from '@angular/core';

import { AttrPoolService } from './attr.pool.service';

import { Util } from '../../../utils/util';




@Component({
	selector: 'attr-pool',
	templateUrl: './attr.pool.html',
	styleUrls: ['./attr.pool.css'],
	providers: [AttrPoolService]
})

export class AttrPoolComponent {

	@Output('attrPoolEmit') attrPoolEmit: EventEmitter<any> = new EventEmitter<any>();

	cat: any;
	shopType:string = '';
	option: any = {
		onlyLeaf: true,
		placeholder: '请选择叶子类目'
	};

	// 属性列表
	pools: any = [];

	// 已选择的属性
	selected_props: any = []; //选择的属性

	constructor(private service: AttrPoolService, private util: Util) { }

	ngOnDestroy() {
		if (this.xhrEvent) {
			this.xhrEvent.unsubscribe();
		}
	}



	// out handel,pie的总开关
	handleUpdated(cat) {

		console.log('广播类目');

		console.log(cat);

		if (this.util.equals(this.cat, cat)) {
			return;
		}

		this.cat = Object.assign({}, cat);
		this.clearInit();
		this.getHttp(cat);
	}

	submit() {
		let data = {
			cat: this.cat,
			prop: this.selected_props,
			shopType: this.shopType
		};

		this.attrPoolEmit.emit(data);
	}

	// 取消选择
	unselect(index) {
		let unselect = this.selected_props.splice(index, 1);
		unselect[0].selected = false;

	}
	// clear
	clearInit() {
		for (let i = this.selected_props.length - 1; i > -1; i--) {
			this.unselect(i);
		}
		this.selected_props = [];

		this.selected_props.length = 0;

		this.pools = [];

		this.pools.length = 0;
	}

	// 选择属性
	select(prop) {
		if (prop.selected) {
			return;
		}

		// 遍历同一个属性列表中的其他属性
		let samelist: any = this.getHasSelect(prop, this.pools);
		let inserted: boolean = false;

		for (let i = 0; i < samelist.length; i++) {
			if (samelist[i].selected) {
				samelist[i].selected = false;

				// 遍历selected_props删除旧的元素
				for (let j = 0; j < this.selected_props.length; j++) {
					if (this.selected_props[j].key == samelist[i].key) {
						this.selected_props.splice(j, 1, prop);
						inserted = true;
					}
				}
			}
		}

		// 一般情况下都插入到末尾
		if (!inserted) {
			// 如果已经满足三个,则删除第一个,并插入新元素到末尾
			if (this.selected_props.length == 2) {
				let _unselect = this.selected_props.shift();
				_unselect.selected = false;
			}

			this.selected_props.push(prop);

		}

		// 标志被选中
		prop.selected = true;
	}

	expand(item) {

		if (!item.showall) {
			item.propertys.forEach((prop) => {
				prop.show = true;
			});
			item.showall = true;
		} else {
			item.propertys.forEach((prop, index) => {
				if (index < 10) {
					prop.show = true;
				} else {
					prop.show = false;
				}
			});
			item.showall = false;
		}

	}

	xhrEvent: any;
	getHttp(cat) {

		let json = {
			categoryId: cat.categoryId
		};

		if (this.xhrEvent) {
			this.xhrEvent.unsubscribe();
		}


		this.pools.length = 0;

		this.xhrEvent = this.service.getPools(json).subscribe((res: any) => {

			if (res.data.length > 0) {
				this.pools = this.parsePool(res.data);
			}

		});


	}

	parsePool(data) {

		data.forEach((item, index) => {

			item.propertys = [];

			item.propertys_show = true; //默认show

			let arry: any = item.propertyValues.split(',');

			arry.forEach((str, index) => {
				item.propertys.push({
					value: Number(str.split(':')[1]),
					show: index > 9 ? false : true,
					name: str.split(':')[0],
					key: item.propertyKey
				});
			});

		});

		data.sort(function(n, m) {
			return n.value - m.value;
		});


		console.log(data);

		return data;
	}

	getHasSelect(prop, propertys) {
		for (var i = 0; i < propertys.length; i++) {
			if (propertys[i].propertyKey == prop.key) {
				return propertys[i].propertys;
			}
		}
	}



}